<template>
  <div class="configurable-table">
    <!-- 顶部按钮区域 -->
    <div class="button-area mb20">
      <div :class="[{ hide: !isCollapse }, 'btn_item']">
        <slot name="buttons"></slot>
      </div>
      <div class="troggle_btn_visible" @click="CollapseClick">
        {{ isCollapse ? "折叠" : "展开" }}
        <el-icon v-if="!isCollapse"><ArrowDown /></el-icon>
        <el-icon v-else><ArrowUp /></el-icon>
      </div>
    </div>

    <div class="table-area">
      <el-table
        height="100%"
        :data="tableData"
        :border="true"
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          key="operater"
          prop="operater"
          :label="t('tableColumns.operation')"
          width="185"
          fixed
        >
          <slot name="operate-btn"></slot>
        </el-table-column>
        <el-table-column type="selection" width="55" fixed />

        <el-table-column
          v-for="col in columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :fixed="col.fixed"
          :formatter="getFormatter(col.prop, filters[col.prop])"
        >
          <template #default="{ row }">
            <template v-if="col.type === 'tag'">
              <el-tag
                style="cursor: pointer"
                :type="getStatusTagType(row[col.prop], col.prop)"
              >
                {{ getFormattedValue(col.prop, row) }}
              </el-tag>
            </template>
            <template v-else-if="col.type === 'input'">
              <el-input type="text" v-model="row[col.prop]" />
            </template>
            <template v-else>
              <text
                @click="columClick(col, row)"
                :style="{
                  color: col.color,
                  cursor: col.isClick ? 'pointer' : 'auto',
                }"
              >
                {{ row[col.prop] }}
              </text>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="pagination-area">
      <Pagination
        :total="total"
        :page="currentPage"
        :limit="pageSize"
        @update:page="handlePageUpdate"
        @update:limit="handleLimitUpdate"
        @pagination="handlePagination"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    required: true,
  },
  filterColums: {
    type: Array,
    required: false,
  },
  filters: {
    type: Object,
    required: true,
  },
  total: {
    type: Number,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits([
  "pageChange",
  "update:page",
  "update:limit",
  "handleSelectionChange",
]);
const formatter = (prop, filterList) => {
  console.log("filterList", filterList, prop);
  return (row) => {
    if (!filterList) return row[prop];
    const filterItem = filterList.find((item) => item.id === row[prop]);
    console.log("filterItem", row, filterItem);
    return filterItem ? filterItem.status : row[prop];
  };
};
const columClick = (value, row) => {
  if (!value.isClick) return;
  alert(JSON.stringify(row) + "被点击");
};
const isCollapse = ref(false);
const CollapseClick = () => {
  console.log("展开折叠点击了");
  isCollapse.value = !isCollapse.value;
};

const getFormatter = (prop) => {
  return (row) => {
    const filterList = props.filters[prop];
    if (!filterList || filterList.length === 0) return row[prop];
    const filterItem = filterList.find((item) => item.id === row[prop]);
    return filterItem ? filterItem.status : row[prop];
  };
};

const getStatusTagType = (statusValue, prop) => {
  // 根据 status 值返回不同的 el-tag 类型
  switch (statusValue) {
    case 0:
      return "info";
    case 1:
      return "success";
    case 2:
      return "danger";
    default:
      return "info";
  }
};

const getFormattedValue = (prop, row) => {
  const formatter = getFormatter(prop);
  return formatter(row);
};
const handleSelectionChange = (val) => {
  emit("handleSelectionChange", val);
};

const handlePageUpdate = (page) => {
  emit("update:page", page);
  emit("pageChange", page);
};

const handleLimitUpdate = (limit) => {
  emit("update:limit", limit);
};

const handlePagination = ({ page, limit }) => {
  emit("pageChange", page);
  emit("update:page", page);
  emit("update:limit", limit);
};
</script>

<style scoped lang="scss">
.configurable-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .button-area {
    display: flex;

    flex-wrap: wrap;
    gap: 10px;
    height: auto;
    background: #fff;
    border-radius: 1;
    border-radius: 6px;
    padding: 15px 20px;
    .btn_item {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 10px;
    }
    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
    .troggle_btn_visible {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      width: 100%;
      color: var(--el-color-primary);
    }
    .hide {
      word-break: break-word; //换行模式
      overflow: hidden;
      text-overflow: ellipsis; //修剪文字，超过2行显示省略号
      display: -webkit-box;
      -webkit-line-clamp: 1; //此处为上限行数
      -webkit-box-orient: vertical;
    }

    // margin-bottom: 20px;
  }

  .table-area {
    flex: 1;
    overflow: auto; /* 当内容超出时出现滚动条 */
    border-radius: 6px 6px 0 0;
    padding: 20px 20px 0 20px;
    background: #ffff;
  }

  .pagination-area {
    display: flex;
    justify-content: flex-end;
    height: auto;
  }
}
</style>
